<template>
  <div class="q-pa-md">
    <div style="color: blue"> </div>

    <div>
      openingStatement:<t-input
        v-model="copilotProps.openingStatement"
      ></t-input
      ><br />
      description:<t-input v-model="copilotProps.description"></t-input><br />
      sysPrompt:<t-input v-model="copilotProps.sysPrompt"></t-input><br />
      <t-button
        @click="updateCopilotVariables"
        color="primary"
        label="更新-variables"
      />
      <t-button
        @click="
          () => {
            variables.age++;
          }
        "
        color="primary"
        label="更新-variable age"
      />
      <t-button
        @click="updateCopilotVariablesWithWidget"
        color="primary"
        label="更新-updateCopilotVariablesWithWidget"
      />
    </div>

    {{ copilotProps }}

    {{ variables }}

    <t-copilot
      @taiTool="onTaiToolHandler"
      ref="refCopilot"
      v-bind="copilotProps"
      :variables="variables"
    ></t-copilot>
  </div>
</template>

<script>
import { useQuasar } from '@teld/q-components';
import { result, transform } from 'lodash';
import { computed, ref, watch } from 'vue';

export default {
  setup() {
    const $q = useQuasar();

    const refCopilot = ref(null);

    const computedVariables = computed(() => {
      return { ...variables.value };
    });

    let variables = ref({ name: '张三', age: 18, sex: '男' });

    let problems = [];

    let tools = [
      {
        id: '404ea154',
        icon: 'fas dx-icon icon-t-fund-fill',
        label: '常用功能',
        script: 'alert(1)',
      },
    ];

    let openingStatement = '开场白';
    let description = '功能说明';
    let sysPrompt = '你的名字${name}, 你今年${age}';

    const copilotProps = ref({
      problems,
      tools,
      openingStatement,
      description,
      sysPrompt,
    });

    const updateCopilotVariables = () => {
      refCopilot.value.updateVariables(variables.value);
    };

    const updateCopilotVariablesWithWidget = () => {
      alert(JSON.stringify(refCopilot.value.variables));
      refCopilot.value.variables.sex =
        refCopilot.value.variables.sex != '女' ? '女' : '男';
    };

    const onTaiToolHandler = e => {
      alert('onTaiToolHandler:' + JSON.stringify(e));
      eval(e.script);
      debugger;
    };

    return {
      refCopilot,
      variables,
      copilotProps: copilotProps,
      updateCopilotVariables,
      updateCopilotVariablesWithWidget,
      onTaiToolHandler,
    };
  },
};
</script>
